import { useEffect, useState } from "react";
import { CodeHighlighter, CustomIcon, TipTapEditor, Title } from "../../../components";
import styles from "./index.module.less";
import { Button } from "antd";
const MdPage = () => {
  const [items, setItems] = useState([])
  const [isEdit, setIsEdit] = useState(true)
    const [htmlStr, setHtmlStr] = useState(`<h2>
    Hello 轻笔 ✍️
  </h2>`);
    const getApiHtmlStr = () => {
        const str = `<h2>
        Hello 轻笔 ✍️
      </h2>
      <p>
        这是一个轻量的、适合年轻的你的 <em>个人笔记</em> 它的名字是 <strong>轻笔</strong>. 当然，你可能会期望从文本编辑器中获得各种基本的文本样式。
      </p>
      <p>
        它支持markdown语法12
      </p>
      <p>
        它也支持emoji表情😊😂😈
      </p>`
        setHtmlStr(str)
    }
    useEffect(() => {
        getApiHtmlStr()
    }, [])
    const editClick = () => {
        setIsEdit(false)
    }

    const cancel = () => {
        setIsEdit(true)
    }
    const submit = () => {
        setIsEdit(true)
        console.log(htmlStr)
    }
    const getEditHTML = (htmlString:string) => {
        setHtmlStr(htmlString)
    }
    return <div className={styles.mdPageBox}>
        <div className={styles.titleBox}>
            <div className={styles.title}>
                <Title style={{ margin: 0 }} title={'这可真是有够酷'} level={4} />
                {isEdit && <div onClick={() => editClick()}>
                    <CustomIcon str={'edit-box-line'} />
                </div>}
            </div>
            {!isEdit && <div className={styles.btnsBox}>
                <Button onClick={() => cancel()} size='middle'>取消</Button>&emsp;
                <Button onClick={() => submit()} size="middle" type="primary">提交</Button>
            </div>}
        </div>
        {htmlStr.length !== 0 && <div onDoubleClick={() => setIsEdit(false)} className={styles.mdBox}>
            {isEdit ? <CodeHighlighter items={items} style={{heigth: '89vh',fontSize: 16}} htmlString={htmlStr} /> :
                <TipTapEditor getItems={setItems} isToC={true} getEditHTML={getEditHTML} content={htmlStr} style={{ borderWidth: 0, height: '89vh', padding: 0 }} />}
        </div>}
    </div>
}

export default MdPage;